<template>
	<navbar title="收货地址" :isBack="true"></navbar>
	<view>
		<view v-if="list.length > 0">
			<view class="addr" v-for="(item,key) in list" :key="key" @tap="selectAddr(item.id)">
				<view class="grey">{{item.province}}{{item.city}}{{item.area}}</view>
				<view class="center">
					<view class="left">{{item.address}}</view>
					<image @tap.stop="edit(item.id)" class="iconimg"
						src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/address/addr1.png" mode="widthFix">
					</image>
				</view>
				<view class="grey">
					<text>111</text>
					<text class="right" style="margin-left: 20rpx;">{{item.mobile}}</text>
				</view>
				<view class="footer">
					<view class="btns marbtns" @tap.stop="deleteItem(item.id,key)">
						<image class="iconimgs"
							src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/address/addr2.png"></image>
						<view>删除</view>
					</view>
					<view class="btns" @tap.stop="setDefault(item.id,key)">
						 
						<image v-if="item.is_default" class="iconimgs" src="../../static/goods/default-active.png">
						</image>
						<image v-else class="iconimgs" src="../../static/goods/default.png"></image>
						<view :class="item.is_default ? 'd-name' : ''">设为默认地址</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-else style="margin-bottom: 24rpx;">
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/address/addr4.png" mode="widthFix"
				class="empty-icon-lg"></image>
			<view class="empty-txt">还没有收货地址哦~</view>
		</view>
		<view class="addrfixed">
			<view class="btns" @tap="add()">+添加收货地址</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'
	import { cityIndex, details } from '@/service/api/city'
	import tools from '@/utils/tools'
	const list = ref([
		{
			id: 1,
			province: "安徽",
			city: "合肥",
			area: "万达",
			address: "xiangx",
			name: 'xxx',
			mobile: "1231231",
			is_default: true
		}
	])
	const add = () => {
		tools.navTo('/pagesB/goods/address/from')
	}
	//修改收货地址
	const edit = (id)=>{
		tools.navTo('/pagesB/goods/address/from?id=' + id)
	}
	//设置默认收货地址
	const setDefault = (id, key) => {
		list.value.forEach((item : any) => {
			if (item.id == id) {
				item.is_default = true
			} else {
				item.is_default = false;
			}
		})
	}
	//选中地址
	const selectAddr = ()=>{
		tools.navTo('',2)
	}
	//删除收货地址
	const deleteItem = (id,key)=>{
		tools.showModel('确认删除？','确认删除此地址吗？').then(()=>{
			console.log('确认');
		}).catch(()=>{
			console.log('取消');
		})
	}
</script>

<style scoped lang="scss">
	@import "../../../static/css/pagesB/address.scss";
</style>
<style>
	page {
		background-color: #F5F6F8;
	}
</style>